/**
 * 主路由
 */
import { lazy, Suspense } from "react";
import { Spin } from "antd";
import Applayout from "../pages/Applayout";
import Userlayout from "../pages/User/Userlayout";
// const Home = lazy(() => import("../pages/Home"));
const Login = lazy(() => import("../pages/Login"));
const Register = lazy(() => import("../pages/Login/register"));
// const Test = lazy(() => import("../pages/Test"));
// const Detail = lazy(() => import("../pages/Test/Detail"));
const Baseset = lazy(() => import("../pages/Setting/Baseset"));
const SetLayout = lazy(() => import("../pages/Setting/SetLayout"));
const Dictionary = lazy(() => import("../pages/Setting/Dictionary"));
const Language = lazy(() => import("../pages/Setting/Language"));
const Reagent = lazy(() => import("../pages/Reagent/"));
const ReagentLayout = lazy(() => import("../pages/Reagent/ReagentLayout"));
const ReagentUser = lazy(() => import("../pages/ReagentUser/"));
const ReagentUserLayout = lazy(() => import("../pages/ReagentUser/ReagentLayout"));
const User = lazy(() => import("../pages/User/"));
const Bottle = lazy(() => import("../pages/Bottle/"));
const Shelf = lazy(() => import("../pages/Shelf/"));
const Workbench = lazy(() => import("../pages/Workbench/"));
const Designer = lazy(() => import("../pages/Designer"));
const DesignerAdd = lazy(() => import("../pages/Designer/DesignerAdd"));
const DesignerShelf = lazy(() => import("../pages/Designer/DesignerShelf"));
const DesignerList = lazy(() => import("../pages/Designer/DesignerList"));
const DesignerReagent = lazy(() => import("../pages/Designer/DesignerReagent"));
const DesignerReactor = lazy(() => import("../pages/Designer/DesignerReactor"));
const ExperimentTables = lazy(
  () => import("../pages/Designer/ExperimentTables")
);

const DesignerFinished = lazy(
  () => import("../pages/Designer/DesignerFinished")
);
const Print = lazy(() => import("../pages/Print"));
const NotFound = lazy(() => import("../pages/NotFound"));

type routerchildren = {
  path?: string;
  index?: boolean;
  element?: JSX.Element;
  children?: routerchildren[];
};

interface ITRouter {
  path: string;
  element?: JSX.Element;
  children?: routerchildren[];
}

const lazyLoad = (children: JSX.Element): JSX.Element => {
  return <Suspense fallback={<Spin />}>{children}</Suspense>;
};

export const settingRRouter: ITRouter = {
  path: "setting",
  element: lazyLoad(<SetLayout />),
  children: [
    {
      path: "baseset",
      element: lazyLoad(<Baseset />),
    },
    {
      path: "user",
      element: lazyLoad(<User />),
    },
    {
      path: "datadictionary",
      element: lazyLoad(<Dictionary />),
    },
    {
      path: "language",
      element: lazyLoad(<Language />),
    },
    {
      path: "reagents",
      element: lazyLoad(<Reagent />),
    },
    {
        path: "userreagents",
        element: lazyLoad(<ReagentUser />),
    },
    {
      path: "bottles",
      element: lazyLoad(<Bottle />),
    },
    {
      path: "shelfs",
      element: lazyLoad(<Shelf />),
    },
    {
      path: "workbenchs",
      element: lazyLoad(<Workbench />),
    },
    {
      path: "experimenttable",
      element: lazyLoad(<ExperimentTables />),
    },
  ],
};

const router: any = [
  {
    path: "/",
    element: <Applayout />,
    children: [
      {
        element: lazyLoad(<Designer />),
        index: true,
      },
      {
        path: "reagents",
        element: lazyLoad(<ReagentLayout />),
      },
      {
        path: "userreagents",
        element: lazyLoad(<ReagentUserLayout />),
      },
      {
        path: "designer",
        // element: lazyLoad(<Designer />),
        children: [
          {
            path: "",
            element: lazyLoad(<DesignerList />),
          },
          {
            path: "add",
            element: lazyLoad(<DesignerAdd />),
          },
          {
            path: "add/:id",
            element: lazyLoad(<DesignerAdd />),
          },
          {
            path: "shelf/:id",
            element: lazyLoad(<DesignerShelf />),
          },
          {
            path: "reagents/:id",
            element: lazyLoad(<DesignerReagent />),
          },
          {
            path: "reactor/:id",
            element: lazyLoad(<DesignerReactor />),
          },
          {
            path: "finished/:id",
            element: lazyLoad(<DesignerFinished />),
          },
        ],
      },
    ],
  },
  {
    path: "/print/:id",
    element: lazyLoad(<Print />),
  },
  {
    path: "login",
    element: lazyLoad(<Login />),
  },
  {
    path: "register",
    element: lazyLoad(<Register />),
  },
  {
    path: "/user",
    element: <Userlayout />,
  },
  {
    path: "*",
    element: lazyLoad(<NotFound />),
  },
];

export default router;
